<template>
  <div class="home">
    <div class="upload">
      <el-upload
        drag
        action="/"
        :on-change="uploadChange"
        :auto-upload="false"
        :show-file-list="false"
        accept=".xls, .xlsx"
        :style="{ float: 'left' }"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <el-button size="small" type="primary">导入</el-button> -->
      </el-upload>
    </div>
    <div class="operation">
      <div>
        <div v-if="isTip">由于数据过多，预览显示前100条</div>
      </div>
      <el-button v-if="isButton" type="primary" @click="exportTable()">开始转换</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="tableData" border style="width: 100%" height="550">
        <el-table-column
          v-for="(item, index) in tableHead"
          :prop="tableHead[index]"
          :label="tableHead[index]"
          :key="item"
        />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { exportTabl } from "../until/file";
import xlsx, { WorkSheet } from "xlsx";
import { defineComponent, ref } from "vue";
import { UploadFilled } from "@element-plus/icons";
import { ElNotification } from "element-plus";
export default defineComponent({
  components: {
    UploadFilled,
  },
  setup() {
    let value_cn: any = [];
    let value_en: any = [];
    let value_ln: any = [];
    let tableHead: any = ref([]);
    let tableData: any = ref([]);
    let isTip = ref<boolean>(false);
    let isButton = ref<boolean>(false);
    // 导入excel
    const uploadChange = async (file: any) => {
      // console.log(file);
      isButton.value=true;
      ElNotification({
        title: "上传成功",
        message: file.name,
        type: "success",
      });
      let data = await exportTabl(xlsx, file);
      console.log(data[0]);
      if (data[0].length > 100) {
        isTip.value = true;
      }
      // 表格标题
      tableHead.value = [
        "ID",
        "软件名称",
        "Page url",
        "软件地址",
        "软件大小",
        "进程",
        "下载时间",
        "反编译时间",
        "App label",
        "状态",
        "Faild msg",
        "更新时间",
      ];
      // tableHead.value = Object.keys(data[0][0]);
      console.log(tableHead.value);
      tableData.value = data[0].slice(0, 100);
      value_cn = [];
      value_en = [];
      data[0].forEach((e: any) => {
        let s = dealWith(e["App label"]);
        // e["App label"] = s;
        if (JudgeType(s) && isLetter(s)) {
          value_ln.push(e);
          // 是否有中文
        } else if (JudgeType(s)) {
          // 是否全中文
          if (isChn(s)) {
            value_cn.push(e);
          } else {
            value_en.push(e);
          }
        } else {
          value_en.push(e);
        }
      });
    };
    const dealWith = (e: any) => {
      // 删除空格
      let space = e.replaceAll(/\s*/g, "");
      // 删除数字
      let number = deleteNum(space);
      return delSpecial(number);
    };
    const deleteNum = (str: any) => {
      let reg = /[0-9]+/g;
      let str1 = str.replace(reg, "");
      return str1;
    };
    // 删除字符串字段的内容
    const delSpecial = (s: any) => {
      var pattern = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）_——－・|{}【】［］〈〉「」♡～『』の‘；：”“'。，、？-]"
      );
      var rs = "";
      for (var i = 0; i < s.length; i++) {
        rs = rs + s.substr(i, 1).replace(pattern, "");
      }
      return rs;
    };
    // 是否有字母
    const isLetter = (str: any) => {
      for (var i in str) {
        var asc = str.charCodeAt(i);
        if ((asc >= 65 && asc <= 90) || (asc >= 97 && asc <= 122)) {
          return true;
        }
      }
      return false;
    };
    // 是否有中文
    const JudgeType = (value: any) => {
      var flag = true;
      if (escape(value).indexOf("%u") < 0) {
        flag = false;
      }
      return flag;
    };
    // 是否全为中文
    const isChn = (str: any) => {
      var re = /[^\u4e00-\u9fa5]/;
      if (re.test(str)) {
        return false;
      } else {
        return true;
      }
    };
    const exportTable = () => {
      let aoa_cn = [tableHead.value];
      let aoa_en = [tableHead.value];
      let aoa_ln = [tableHead.value];
      value_cn.forEach((d) => {
         aoa_cn.push([
          d["ID"],
          d["软件名称"],
          d["Page url"],
          d["软件地址"],
          d["软件大小"],
          d["进程"],
          d["下载时间"],
          d["反编译时间"],
          d["App label"],
          d["状态"],
          d["Faild msg"],
          d["更新时间"],
        ]);
      });
      value_en.forEach((d) => {
         aoa_en.push([
          d["ID"],
          d["软件名称"],
          d["Page url"],
          d["软件地址"],
          d["软件大小"],
          d["进程"],
          d["下载时间"],
          d["反编译时间"],
          d["App label"],
          d["状态"],
          d["Faild msg"],
          d["更新时间"],
        ]);
      });
      value_ln.forEach((d) => {
        aoa_ln.push([
          d["ID"],
          d["软件名称"],
          d["Page url"],
          d["软件地址"],
          d["软件大小"],
          d["进程"],
          d["下载时间"],
          d["反编译时间"],
          d["App label"],
          d["状态"],
          d["Faild msg"],
          d["更新时间"],
        ]);
      });
      let worksheet: WorkSheet = xlsx.utils.aoa_to_sheet(aoa_cn);
      let workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, worksheet, "中文");
      let worksheet2: WorkSheet = xlsx.utils.aoa_to_sheet(aoa_en);
      xlsx.utils.book_append_sheet(workbook, worksheet2, "英文");
      let worksheet3: WorkSheet = xlsx.utils.aoa_to_sheet(aoa_ln);
      xlsx.utils.book_append_sheet(workbook, worksheet3, "特殊的");
      xlsx.writeFile(workbook, "中英文过滤.xls");
    };
    return {
      isButton,
      tableHead,
      tableData,
      isTip,
      uploadChange,
      JudgeType,
      exportTable,
    };
  },
});
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  overflow: hidden;
}
.upload {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.progress {
  width: 350px;
  margin: 0 auto;
}
.tableBox {
  padding: 0px 20px;
}
.operation {
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>